<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            list-style-type: none;
        }
        .so{
            width: 227px;
            border: 0.5px solid slategray;
        }
    </style>
</head>
<body>
        <ul id="i">
            <li>
                <a href="#">dasdasdasdas</a>
                <div style="display: none">
                    <p style="float: left;padding-right: 20px"><img src="image/img4.jpg" alt=""></p>
                    <div>
                        <p>s4</p>
                        <p>sfasafsfadasdasd</p>
                        <p>sfasafsfadasdasd</p>
                        <p>sfasafsfadasdasd</p>
                    </div>
                </div>
            </li>
            <li class="so"></li>
            <li>
                <a href="#" >dasdasdasdas</a>
                <div style="display: none">
                    <p style="float: left;padding-right: 20px"><img src="image/img4.jpg" alt=""></p>
                    <div>
                        <p>s3</p>
                        <p>sfasafsfadasdasd</p>
                        <p>sfasafsfadasdasd</p>
                        <p>sfasafsfadasdasd</p>
                    </div>
                </div>
            </li>
            <li class="so"></li>
            <li>
                <a href="#" >dasdasdasdas</a>
                <div style="display: none">
                    <p style="float: left;padding-right: 20px"><img src="image/img4.jpg" alt=""></p>
                    <div>
                        <p>s2</p>
                        <p>sfasafsfadasdasd</p>
                        <p>sfasafsfadasdasd</p>
                        <p>sfasafsfadasdasd</p>
                    </div>
                </div>
            </li>
            <li class="so"></li>
            <li>
                <a href="#" >dasdasdasdas</a>
                <div style="display: none">
                    <p style="float: left;padding-right: 20px"><img src="image/img4.jpg" alt=""></p>
                    <div>
                        <p>s1</p>
                        <p>sfasafsfadasdasd</p>
                        <p>sfasafsfadasdasd</p>
                        <p>sfasafsfadasdasd</p>
                    </div>
                </div>
            </li>
            <li class="so"></li>
        </ul>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
           $(function(){
               var b=true;
               $("#i li a").click(function(){
                   var yy=$(this).next();
                   if(b==true){
                       yy.slideDown();
                       $(this).hide();
                       var index=$(this).parent().index();
                       $("ul>li:not(:eq("+index+"))>div").slideUp();
                       $("ul>li:not(:eq("+index+"))").find("a").show();
                       b=false;
                   }else{
                       yy.slideUp();
                       b=true;
                   }
               })

           })
        </script>
</body>
</html>